<template>
	<view style="position:absolute;">
		<uni-popup v-if="loaded" ref="popup" type="bottom" :safeArea="safeArea" backgroundColor="#fff">
			<uni-nav-bar :title="title" :border="false" :rightText="$t('submit')" left-icon="left" @clickLeft="close" @clickRight="handleSubmitTask" />
			<view class="module-form full-width">
				<uni-forms v-if="loaded" ref="form" :modelValue="formData" :label-width="80" label-align="left" label-position="top">
					<uni-forms-item :label="$t('module.parent-module')">
						<view class="full-width">
							<module-picker v-model="formData.modulePid"></module-picker>
						</view>
					</uni-forms-item>
					<uni-forms-item :label="$t('module.name')" name="moduleName" required>
						<uni-easyinput type="text" v-model="formData.moduleName" :placeholder="$t('module.enter-module-name')" maxlength="128" />
					</uni-forms-item>
					<uni-forms-item :label="$t('annex')">
						<upload-file v-model="formData.annexUrls" />
					</uni-forms-item>
					<uni-forms-item :label="$t('remark')">
						<uni-easyinput type="textarea" v-model="formData.remark" :placeholder="$t('please-enter-remark')" maxlength="65536" />
					</uni-forms-item>
				</uni-forms>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import ModulePicker from "@/components/module/module-picker/index.vue"
	import { addModule, updateModule } from "@/api/system/module";
	export default {
		name: 'AddPopup',
		components: { ModulePicker },
		data() {
			return {
				// 表单数据
				formData: {
					moduleId: null,
					modulePid: 0,
					moduleName: null,
					batchModuleNames: [],
					annexUrls: null
				},
				// 表单中的计划时间
				planTimeRange: [],
				// 表单规则
				rules: {
					moduleName: {
						rules: [{
							required: true,
							errorMessage: this.$i18n.t('module.name-cannot-empty'),
						}]
					},
				},
				// 是否缓存表单数据，用于下次新建时免填
				isSaveFormCache: false,
				// 是否显示TTS组件
				toolsVisible: true,
			}
		},
		props: {
			safeArea: {
				type: Boolean,
				default: true
			}
		},
		computed: {
			/** 当前团队ID */
			teamId() {
			    return this.$store.state.user.config.currentTeamId;
			},
			/** 当前项目名称 */
			projectId() {
			    return this.$store.state.user.config.currentProjectId;
			},
			/** 获取当前成员id */
			currentMemberId() {
				return this.$store.state.user.id;
			},
			loaded() {
				return this.$i18n.locale?true:false;
			},
			title: function() {
				return this.formData.moduleId?this.$i18n.t('module.add'):this.$i18n.t('module.modify')
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules);
		},
		methods: {
			/**
			 * 打开弹框
			 * @param {Object} module 交付物
			 */
			open(module) {
				this.reset();
				this.formData = {
					...this.formData,
					...module
				}
				this.$refs.popup.open('bottom');
			},
			/**
			 * 关闭弹框
			 */
			close() {
				this.$refs.popup.close();
			},
			reset() {
				this.formData = {
					moduleId: null,
					modulePid: 0,
					moduleName: null,
					batchModuleNames: [],
					annexUrls: null
				}
			},
			/** 创建或更新 */
			handleSubmitTask() {
				const self = this;
				uni.showLoading()
				this.$refs.form.validate().then(res=>{
					this.formData.projectId = this.projectId;
					this.formData.moduleId = this.formData.moduleId?this.formData.moduleId:null;
					if (this.formData.moduleId) {
						updateModule(this.formData).then(res => {
							uni.hideLoading();
							self.close();
							self.$emit('modify', this.formData);
						});
					} else {
						addModule(this.formData).then(res => {
							uni.hideLoading();
							self.close();
							self.$emit('create', res);
						});
					}
				}).catch(err =>{
					uni.hideLoading()
					console.log('表单错误信息：', err);
				})
			},
			handleCaseChange(caseId, caseStepId) {
				this.formData.caseId = caseId;
				this.formData.caseStepId = caseStepId;
			}
		}
	}
</script>
<style lang="scss" scoped>
	.module-form {
		padding: 20rpx 40rpx;
	}
	::v-deep .uni-forms {
		margin: 0 20rpx 20rpx 20rpx;
		padding-top: 20rpx;
	}
	.bottom-tools {
		width: 100%;
		position: absolute;
		margin: 0rpx 0rpx env(safe-area-inset-bottom) 0rpx;
		bottom: 0;
	}
	.tools-button {
		height: 100rpx;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	.left {
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}
	::v-deep .right {
		width: 300rpx;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
	.form-cache-switch {
		margin-top: 20rpx;
	}
	.form-item-description {
		font-size: $uni-font-size-sm;
		color: $uni-text-color-disable;
	}
	.body-footer {
		width: 100%;
		height: calc(env(safe-area-inset-bottom) + 100rpx);
	}
</style>